<template>
	<el-dialog :title="title" :visible.sync="open" :width="width" append-to-body :show-close="false" lock-scroll :close-on-click-modal="false" :close-on-press-escape="false">
		<div  style="height: calc(80vh - 180px);overflow-x: hidden;padding-right: 40px;">
		<slot name="center" v-if="open">
			
		</slot>
		</div>
		<div slot="footer" class="dialog-footer" v-loading="loading">
			<el-button type="primary" @click="submitForm" v-if="showBtn">确 定</el-button>
			<el-button type="danger" @click="cancel">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
	export default {
		props:{
			width:{
				default:'50%'
			}
		},
		name: "Template",
		data() {
			return {
				// 遮罩层
				loading: false,
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				//是否显示按钮
				showBtn:true,
			};
		},
		watch:{
			open(a){
				if(!a){
					this.loading = false;
				}
			}
		},
		created() {
		},
		methods: {
			submitForm(){
				this.loading = true;
				this.$emit('ok')
			},
			cancel(){
				this.open = false
				this.title = ''
				this.$emit('close')
			}
		}
	};
</script>
<style scoped lang="scss">
	.dialog-footer{
		width: 50%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		*{
			flex: 1;
		}
	}
</style>